<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="问题反馈"></u-navbar>
		<view class="d-p-30">
			<u--textarea v-model="form.content" placeholder="请输入问题详情" height="400rpx"></u--textarea>
			<view class="d-m-t-30">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" maxCount="9" accept="image" :multiple="true" width="200rpx" height="200rpx"></u-upload></view>
		</view>

		<view class="bottom u-safe-area-inset-bottom">
			<view class="u-safe-area-inset-bottom d-flex d-row-center">
				<view style="width: 500rpx;"><u-button text="提交问题" shape="circle" type="primary"></u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
import {upload,getBid} from '../../common/api.js';
export default {
	data() {
		return {
			form: {
				images: []
			},
			bid: null,
			fileList1: [],
		};
	},
	onLoad() {
		getBid({
			params: {
				ywlx: 'salary_device_rykq_mx'
			}
		}).then(e => {
			this.bid = e.data;
		});
	},
	methods: {
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			this.form.images.splice(event.index, 1);
		},
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					})
				);
				this.form.images.push(result.url);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return upload({
				filePath: url,
				name: 'file',
				formData: {
					ywlx: 'salary_device_rykq_mx',
					attachType: 'salary_device_rykq_mx',
					bid: this.bid
				}
			});
		}
	}
};
</script>

<style lang="scss">
.bottom {
	box-sizing: content-box;
	height: 120rpx;
	> view {
		position: fixed;
		background-color: #ffffff;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
	}
}
</style>
